<template>
    <a-table :data-source="dataSource" :pagination="pagination" :columns="columns">
        <template #bodyCell="{ text, column,record }">
            <template v-if="column.dataIndex === 'profile'">
                <a @click="showImage(text)">查看图片</a>
                <a-modal style="text-align: center;" @cancel="hideImage" :footer="null"
                         :visible="modalVisible">
                    <img style="width: 100%;"
                         :src="imagePath"
                         alt="暂无图片"/>
                </a-modal>
            </template>
        </template>
    </a-table>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";

    export default {
        name: "MembersPage",
        data() {
            return {
                columns: [
                    {
                        title: "会员编号",
                        dataIndex: "id",
                        key: "id",
                    },
                    {
                        title: "会员呢称",
                        dataIndex: "name",
                        key: "name",
                    },
                    {
                        title: "手机号码",
                        dataIndex: "phone",
                        key: "phone",
                    },
                    {
                        title: "注册时间",
                        dataIndex: "createdTime",
                        key: "createdTime",
                    },
                    {
                        title: '会员头像',
                        dataIndex: 'profile',
                        key: "profile",
                    }
                ],
                pagination: {
                    size: "small",
                    showSizeChanger: true,
                    showQuickJumper: true
                },
                totalCount: 0,
                dataSource: [],
                state: {
                    searchText: '',
                    searchedColumn: '',
                },
                modalVisible: false,
                imagePath: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            }
        },
        mounted() {
            this.getUsers();
        },
        methods: {
            getUsers() {
                let that = this;
                request({
                    url: api.GET_ALL_USERS,
                }).then(res => {
                    that.dataSource = res;
                })
            },
            showImage(imagePath) {
                this.imagePath = imagePath;
                this.modalVisible = true
            },
            hideImage() {
                this.modalVisible = false
            },
        },

    }
</script>

<style scoped>

</style>